<template>
  <div class="use-props">
    use-props
    {{ a }}-{{ b }}-{{ c }}
    <ul>
      <li v-for="item in lists" ::key="item.id">{{ item.name }}--{{ item.age }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="UseProps">
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue';
import {type Persons } from '@/types';
let a = ref(999);
let b = ref(1);
let c = ref(55);


// 暴露子组件属性，给父组件访问
defineExpose({a,b,c});

// 定义父组件传递的参数类型 + 限定传递的参数类型 + 默认值
withDefaults(defineProps<{lists?:Persons}>(),{
  lists:() => [
    {
        id:'111',
        name:'小百度1',
        age:19
    },
    {
        id:'232',
        name:'小珏1',
        age:20
    }
  ]
});

console.log("setup--创建");


//  挂载前
onBeforeMount(() =>{
  console.log("挂载前");
})

// 挂载后
onMounted(() =>{
  console.log("挂载后");
})

// 更新前
onBeforeUpdate(() =>{
  console.log("更新前端");
})

// 更新后
onUpdated(() =>{
  console.log("更新后");
})

// 销毁前
onBeforeUnmount(() =>{
  console.log("销毁前");
})

// 销毁后
onUnmounted(() =>{
  console.log("销毁后");
})


</script>

<style scoped>

</style>